<template>
	<view class="content">
		<navBar title="品鉴福利" :change="scrollChange" ref="navHeader"></navBar>
		<view class="header-bg" :style="'margin-top:-'+headerHeight+'px'">
			<image src="/static/miaojie/judge_bg.png" mode="widthFix" />
		</view>
		<view class="act-rule" @click="goGuize">规则</view>
		<view class="container">
			<view class="judge-card">
				<image src="/static/miaojie/judge_card.png" mode="widthFix" />
				<view class="term">有效期：当月有效1张</view>
				<view class="card-bottom flex justify-between align-center">
					<view class="bottom-text">
						<view class="number">{{pinjiannum}}</view>
						<text>品鉴卡(张)</text>
					</view>
					<view class="bottom-btn-wrap" @click="duihuan">
						<text class="bottom-btn">免费兑换福利</text>
					</view>
				</view>
			</view>
			<view class="judge-title flex align-center justify-center">
				<image src="/static/miaojie/headline_judge.png" />
				<text>品鉴晒单</text>
				<image src="/static/miaojie/headline_judge.png" />
			</view>
			<view class="list flex" v-for="(item,index) in pinjianList" :key="index">
				<view class="list-img flex justify-center align-center">
					<image :src="item.pic" />
				</view>
				<view class="list-info">
					<view class="info-title text-cut">{{item.name}}</view>
					<view class="info-price">
						<view class="price"><text>商品价值￥</text>{{item.price}}</view>
					</view>
					<view class="yuan-price">送出福利：{{item.sale}}件</view>
					<!-- <view class="judge-info flex align-center">
						<image src="/static/missing-face.png" />
						<text>于成云</text>
						<view>品鉴官</view>
					</view> -->
				</view>
			</view>
		</view>
	<!-- 客服弹出框 -->
	<view class="weChat_popups" v-if="watchShow == 1">
		<view class="popups_bg" @click="watchShow = 0"></view>
		<view class="popups_body">
			<view class="popups_no" @click="watchShow = 0">
				<image src="/static/icon_close.png" mode=""></image>
			</view>
			<view class="popups_content">
				<view class="popups_title">品鉴规则</view>
				<view class="popups_phone">
					妙街品鉴官尊享福利</br>
					1·妙街所有商品都由品鉴官先品鉴在上架，保证质量口碑好货</br>
					2·成为品鉴官之后每个月免费包邮到家，进行品鉴，反馈信息</br>
					3·12张品鉴卡，每个月使用一次</br>
					4·各位品鉴官要把收货照片，视频，反馈心得转发客服，运营部进行总结评选</br>
					5·导购和店长都具有品鉴官权益</br>
					最终解释权归妙街细品所有
					
				</view>
				<!-- <view class="popups_btn" @click="setCopyWatch(watgchNum)"></view> -->
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import navBar from "@/components/header-nav";
	export default {
		components: {
			uniLoadMore,
			navBar
		},
		data() {
			return {
				watchShow:0,
				headerHeight: 0,
				scrollChange: false,
				list: [1, 2, 3, 4],
				pinjiannum: 0,
				uid: 0,
				pinjianList:[]
			};
		},

		async onShow() {
			this.getuserinfo();
			this.getMjnum()
			
			// 获取品鉴晒单商品
			let params = {
				type: 7,
			}
			let data = await Api.apiCall('get', Api.index.bannerList, params);
			this.pinjianList = data;
			//console.log(data)
		},
		onReady() {
			this.headerHeight = uni.getStorageSync('headerHeight');
		},
		onPageScroll(e) {
			if (e.scrollTop > this.headerHeight) {
				this.scrollChange = true
			} else {
				this.scrollChange = false
			}
		},
		methods: {
			goGuize(){
				this.watchShow = 1;
			},
			async getMjnum() {
				let params = {
					memberId: this.uid
				}
				let res = await Api.apiCall('get', 'single/user/getMjNum', params);
				this.pinjiannum = res;
			},
			getuserinfo() {
				let userInfos = uni.getStorageSync('userInfos') || '';
				this.uid = userInfos.id;
			},
			async duihuan() {
				if (this.pinjiannum >= 1) {
					let params = {
						memberId: this.uid
					}
					let res = await Api.apiCall('POST', 'pay/directOrder', params);
					if (res == undefined || res == '' || res == null) {
						uni.showToast({
							icon: 'none',
							title: '每月只能兑换一次!'
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: '兑换成功，请等待发货！'
						})
					}
					
					this.getMjnum()
				} else {
					uni.showToast({
						icon: 'none',
						title: '品鉴卡不足！'
					})
				}
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		min-height: 100vh;
		position: relative;

		.header-bg {
			width: 100%;
			font-size: 0;

			image {
				width: 100%;
			}
		}

		.container {
			background: linear-gradient(to bottom, #6AE8E3, #fff);
			padding: 0 20upx 90upx;

			.judge-card {
				position: relative;

				image {
					padding: 0 5upx;
					width: 100%;
				}

				.term {
					width: 100%;
					padding: 40upx 60upx;
					position: absolute;
					top: 0;
					text-align: right;
					font-size: 24upx;
					color: #fff;
				}

				.card-bottom {
					width: 100%;
					padding: 60upx 0;
					position: absolute;
					bottom: 0;

					.bottom-text {
						width: 50%;
						text-align: center;
						font-size: 28upx;
						color: #FFF561;

						.number {
							font-size: 64upx;
						}
					}

					.bottom-btn-wrap {
						width: 50%;
						text-align: center;

						.bottom-btn {
							font-size: 30upx;
							color: #fff;
							padding: 20upx 40upx;
							background: linear-gradient(to right, #FBC900, #F88400);
							border-radius: 36upx;
						}
					}
				}
			}

			.judge-title {
				margin-top: 50upx;

				image {
					width: 38upx;
					height: 52upx;
				}

				text {
					padding: 0 20upx;
					font-size: 36upx;
					color: #107972;
				}
			}

			.list {
				margin-top: 30upx;
				padding: 20upx;
				background: #fff;
				margin-bottom: 20upx;
				border-radius: 20upx;
				box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.06);

				.list-img {
					width: 280upx;
					height: 280upx;
					border-radius: 14upx;
					border: 1px solid rgba(245, 245, 245, 1);

					image {
						width: 200upx;
						height: 200upx;
					}
				}

				.list-info {
					width: calc(100% - 300upx);
					margin-left: 20upx;

					.info-title {
						max-width: 100%;
						font-size: 32upx;
						color: #333;
						font-weight: bold;
					}

					.info-price {
						.price {
							padding: 28upx 0 22upx;
							font-size: 48upx;
							color: #F94242;

							text {
								font-size: 26upx;
							}
						}
					}

					.yuan-price {
						font-size: 26upx;
						color: #999;
					}

					.judge-info {
						margin-top: 30upx;

						image {
							width: 52upx;
							height: 52upx;
							border-radius: 52upx;
						}

						text {
							font-size: 32upx;
							color: #666;
							padding: 0 10upx;
							line-height: 32upx;
						}

						view {
							height: 32upx;
							width: 90upx;
							line-height: 32upx;
							text-align: center;
							background: linear-gradient(to right, #FF7777, #FF1D1D);
							border-radius: 20upx;
							border-top-left-radius: 0;
							font-size: 20upx;
							color: #fff;
						}
					}

				}
			}

		}

	}
	// 客服弹出框
	.weChat_popups {
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
	
		.popups_bg {
			z-index: 1000;
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: #000;
			opacity: 0.3;
		}
	
		.popups_body {
			z-index: 1001;
			position: absolute;
			right: 0;
			left: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 600upx;
			height: 760upx;
			line-height: 50upx;
			border-radius: 30upx;
			background-color: #FFFFFF;
	
			.popups_no {
				position: absolute;
				right: 20upx;
				top: 20upx;
				width: 32upx;
				height: 32upx;
				display: flex;
				align-items: center;
				justify-content: center;
	
				image {
					width: 32upx;
					height: 32upx;
				}
			}
	
			.popups_content {
				width: 100%;
				padding: 0 30upx;
				padding-top: 30upx;
				padding-bottom: 30upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
	
				.popups_title {
					margin-top: 30upx;
					font-size: 36upx;
					text-align: center;
				}
	
				.popups_phone {
					font-size: 30upx;
					// text-align: center;
					font-weight: 500;
				}
	
				.popups_btn {
					width: 100%;
					height: 88upx;
					line-height: 88upx;
					background-color: #AD1E22;
					font-size: 36upx;
					border-radius: 44upx;
					line-height: 88upx;
					text-align: center;
					color: #FFFFFF;
				}
			}
		}
	}
	

</style>
